<!-- eslint-disable sort-imports -->
<script lang="jsx" setup>
import { getCurrentInstance, ref, watch, nextTick } from 'vue';
import { Input, Select, Button } from 'ant-design-vue';
import CommonSearch from '@/components/common/common-search.vue';
import {
  modifiedtoolData, // 修改刀具信息
  erasetoolData // 删除刀具
} from '@/service/api/modules/cut/v-cut';
import AddKnifeInfo from './add-knife-info.vue';

const instance = getCurrentInstance();
const proxy = instance.proxy;

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => false
  }
});
const knifeN = ref([
  { label: 'A', value: 'A' },
  { label: 'B', value: 'B' },
  { label: 'C', value: 'C' },
  { label: 'D', value: 'D' },
  { label: 'E', value: 'E' },
  { label: 'F', value: 'F' }
]);

const modelVisible = ref(false);

const emit = defineEmits('close');

const searchParams = ref({
  knifeLib: null
});

const formList = [
  {
    type: 'select',
    key: 'knifeLib',
    label: '刀组',
    placeholder: '请选择刀组',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4,
    selectOptions: knifeN
  },
  {
    type: 'input',
    key: 'knifeNum1',
    label: '刀具上编号',
    placeholder: ' 请输入',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  },
  {
    type: 'input',
    key: 'knifeNum2',
    label: '刀组下编号',
    placeholder: '请输入',
    span: 24,
    md: 12,
    lg: 8,
    xl: 8,
    xxl: 4
  }
];

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 80,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'knifeLib',
    dataIndex: 'knifeLib',
    title: '绑定刀组',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record, index }) => {
      return (
        // value={record.knifeLib}
        <Select
          style="width: 100%"
          v-model:value={tableRef.value.tableData[index].knifeLib}
          options={knifeN.value}
          onChange={val => {
            tableRef.value.tableData[index].knifeLib = val;
            proxy.$forceUpdate();
          }}
        ></Select>
      );
    }
  },
  {
    key: 'knifeNum1',
    dataIndex: 'knifeNum1',
    title: '刀具上编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.knifeNum1}
          onChange={e => {
            record.knifeNum1 = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'knifeNum2',
    dataIndex: 'knifeNum2',
    title: '刀具下编号',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.knifeNum2}
          onChange={e => {
            record.knifeNum2 = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'knifeDiameter1',
    dataIndex: 'knifeDiameter1',
    title: '刀具直径1(mm)',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.knifeDiameter1}
          onChange={e => {
            record.knifeDiameter1 = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'knifeDiameter2',
    dataIndex: 'knifeDiameter2',
    title: '刀具直径2(mm)',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return (
        <Input
          value={record.knifeDiameter2}
          onChange={e => {
            record.knifeDiameter2 = e.target.value;
          }}
        ></Input>
      );
    }
  },
  {
    key: 'useTotalLength',
    dataIndex: 'useTotalLength',
    title: '累计长度',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createDate',
    dataIndex: 'createDate',
    title: '创建时间',
    width: 180,
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'createBy',
    dataIndex: 'createBy',
    title: '创建人',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'cz',
    dataIndex: 'cz',
    title: '操作',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 130,
    fixed: 'right',
    customRender: ({ record }) => {
      return (
        <div>
          <Button type="primary" ghost size="small" class="m-r8px" onClick={() => editKnife(record)}>
            修改
          </Button>
          <Button danger ghost size="small" class="m-r8px" onClick={() => deleteKnife(record)}>
            删除
          </Button>
        </div>
      );
    }
  }
];

function handleClose() {
  searchParams.value.knifeLib = null;
  emit('close');
}

const tableRef = ref(null);

function search() {
  tableRef.value.getData(1);
}

function reset() {
  nextTick(() => {
    searchParams.value = {
      name: null
    };
    search();
  });
}

// // 刀组库点击修改
function editKnife(val) {
  modifiedtoolData(val).then(({ error, data }) => {
    if (!error) {
      window.$message?.success('修改成功');
      tableRef.value.getData();
    }
  });
}
// 点击删除刀组库
function deleteKnife(val) {
  erasetoolData(val).then(({ error, data }) => {
    if (!error) {
      window.$message?.success('删除成功');
      tableRef.value.getData();
    }
  });
}

const addKnifeInfoVisible = ref(false);

function handleAdd() {
  addKnifeInfoVisible.value = true;
}

watch(
  () => props.visible,
  val => {
    modelVisible.value = val;
  },
  {
    deep: true,
    immediate: true
  }
);
</script>

<template>
  <Modal
    v-model:visible="modelVisible"
    title="查看刀具库"
    height="85vh"
    width="75vw"
    :destroy-on-close="true"
    :centered="true"
    @close="handleClose"
  >
    <div class="search-knife-info-modal h-full w-full">
      <CommonSearch v-model:searchParams="searchParams" :form-list="formList" @reset="reset" @search="search">
        <template #other>
          <AButton
            v-hasAuth="['production-management:203:add-knife']"
            type="primary"
            ghost
            class="mini-btn ml-3px"
            @click="handleAdd"
          >
            <template #icon>
              <icon-ic-round-add class="align-sub text-icon" />
            </template>
            <span class="ml-3px">新增刀具</span>
          </AButton>
        </template>
      </CommonSearch>
      <Table
        ref="tableRef"
        v-model:searchParams="searchParams"
        url="/qms/single/singleVcutKnifes/listKnife"
        :column="column"
        :show-row-selection="false"
        row-key="id"
        :scroll="{ y: 'auto' }"
        is-init-get-data
        :page-size="10"
        :page-size-options="['10', '50', '100', '200', '300', '500']"
        class="w-full table"
        :row-height="40"
      ></Table>
    </div>
    <template #footer>
      <div class="modal-footer">
        <AButton @click="handleClose">关 闭</AButton>
      </div>
    </template>
  </Modal>
  <AddKnifeInfo
    :visible="addKnifeInfoVisible"
    @close="addKnifeInfoVisible = false"
    @add-success="search"
  ></AddKnifeInfo>
</template>

<style lang="scss" scoped>
.search-knife-info-modal {
  .table {
    height: calc(100% - 42px);
    margin-top: 8px;
    :deep(.ant-card-body) {
      height: calc(100% - 30px);
    }
  }
}
</style>
